<template>
  <div>
    <h3> 获取传递进来的参数 </h3>
    <div>
      params: {{ $route.params.id }}
      <br />
    </div>
    <div>
      <router-link to="/show/54"> 拥有相同的父路由 </router-link>
    </div>
    <div>
      <h3>嵌套路由的使用</h3>
      <router-link :to="`/show/${$route.params.id}/profile`">跳转到子路由</router-link>
      </br>
      <router-link to="/profile">跳转</router-link>
      <router-view></router-view>
    </div>
  </div>
</template>

<script>
  export default {
    mounted () {
      console.log(this.$route.params)
    },
    // watch: {
    //   '$route' (to, from) {
    //     console.log(to.params)
    //   }
    // },
    // 
    beforeRouteUpdate (to, from, next) {
      console.log(to.params)
      next()
    }
  }
</script>

<style>
  
</style>